<!DOCTYPE>
<html>
<meta charset="utf-8"/>
<title>WebSocket Test</title>
<script src="http://cdn.bootcss.com/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
    var $URL = "__APP__/Home/Redis/";
    var wsUri = "ws://120.26.220.223:8283";
    var output;
    var clientId;
    var client_id;

    function init() {
        output = document.getElementById("output");
        testWebSocket();
        websocket.send("hello \n");
    }

    function testWebSocket() {
        websocket = new WebSocket(wsUri);
        websocket.onopen = function (evt) {
            onOpen(evt)
        };
        websocket.onclose = function (evt) {
            onClose(evt)
        };
        websocket.onmessage = function (evt) {
            onMessage(evt)
        };
        websocket.onerror = function (evt) {
            onError(evt)
        };
    }
    function onOpen(evt) {
        writeToScreen("CONNECTED");
    }

    function onClose(evt) {
        writeToScreen("DISCONNECTED");
    }

    function onMessage(evt) {
        client_id = evt.data;
        writeToScreen('<span style="color: blue;">RESPONSE: ' + evt.data + '</span>');
    }

    function onError(evt) {
        writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
    }

    function forExample() {
        var myJsonStr = setJson(myJsonStr, "clientId", clientId);
        myJsonStr = setJson(myJsonStr, "type", "say");
        myJsonStr = setJson(myJsonStr, "userId", "565081");
        myJsonStr = setJson(myJsonStr, "userName", "userName123");
        myJsonStr = setJson(myJsonStr, "userImage", "http:\/\/wx.qlogo.cn\/mmopen\/eMWJkc6M6KoWxQqLKuGfPjxRPGO3SmMjeY0I0jJ6WTdGwaEuBm6Z42SsHtVG3afwD71HLb0ZBV8DepIYGVDdVVscQdyQ4siax\/0");
        myJsonStr = setJson(myJsonStr, "roomId", "005");
        myJsonStr = setJson(myJsonStr, "message", "哇哈哈哈哈");
        myJsonStr = setJson(myJsonStr, "time", "1470300123908");
        writeToScreen("EXAMPLE: " + myJsonStr);
    }

    function writeToScreen(message) {
        var pre = document.createElement("p");
        pre.style.wordWrap = "break-word";
        pre.innerHTML = message;
        output.appendChild(pre);
    }

    //添加或者修改json数据
    function setJson(jsonStr, name, value) {
        if (!jsonStr)jsonStr = "{}";
        var jsonObj = JSON.parse(jsonStr);
        jsonObj[name] = value;
        return JSON.stringify(jsonObj)
    }

    function toJson(str) {
        var json = eval('(' + str + ')');
        return json;
    }

    function sub(){
        var $content = $("#data").val();
        var data = {
            content:$content,
            openId:'888888'
        };
        websocket.send(JSON.stringify(data));

    }

    function commitAjax()
    {
        var commitMsg = {
            content:'123213',
        };
        websocket.send(JSON.stringify(commitMsg));
        var aa= JSON.parse(client_id);
        var $content = $("#data").val();
        var data = {
            content:$content,
            client_id:aa.clientId
        };
        var $url = $URL+'userCommit';

        var success = function(response){
            console.log(response);
        };
        $.post($url,data,success,'json');
    }
    window.addEventListener("load", init, false);

</script>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
    <title>阿麦带你看2016英雄联盟全球总决赛</title>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<body>
<h2>WebSocketDemo</h2>
token：<input type="text" name="token" id="token"><p></p>
加密内容信息：<input type="text" style="height: 50px; width: 100%;" name="data" id="data"><p></p>
<button id="submit" onclick="sub()" >提交</button> <p></p>
<button id="submit" onclick="commitAjax()" >获取视频token</button> <p></p>
<button id="submit" onclick="forExample()" >JSON数据</button> <p></p>

<div id="output"></div>
<script>

</script>
</body>
</html>
